<template>
  <div>
    <el-tabs type="border-card" style="width: 100%">
      <!-- 筛选查询条件 -->
      <div style="border: 1px solid lightgray;">
        <div style="width: 100%; height: 50px;background-color: rgb(243, 243, 243);">
          <span style="position: relative; top: 15px; left: 10px; font: bold 18px '等线';">筛选查询</span>
        </div>
        <div style="height: 40px; position: relative; left: 20px; top: -10px">
          <!-- 搜索筛选 -->
          <el-form :inline="true" :model="searchItem" class="user-search">
            <el-form-item>
              <el-input size="large" v-model="searchItem.chain_no" placeholder="链单编号"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input size="large" v-model="searchItem.scfpUser.name" placeholder="开单人"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="large" type="primary" icon="el-icon-search" @click="search">开始检索</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 按钮组 -->
      <div>
        <div style="padding-top: 30px; padding-bottom: 15px;">
          <el-radio-group v-model="type" @change="updateData" fill="rgb(0,191,160)">
            <el-radio-button label="全部链单">全部链单（<span class="button_group"> {{ allCount }} </span>）
            </el-radio-button>
            <el-radio-button label="待审链单">待审链单（<span class="button_group"> {{ recheckCount }} </span>）
            </el-radio-button>
            <el-radio-button label="审核失败">审核失败（<span class="button_group"> {{ failCount }} </span>）
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <!-- 查询得到的列表信息 -->
      <div style="border: 1px solid lightgray;">
        <div style="width: 100%; height: 50px;background-color: rgb(243, 243, 243);">
          <!-- <el-button size="small" style="position:relative; left: 10px; top: 10px">批量兑付所选链单</el-button> -->
          <span style="position:relative; top: 10px;margin-left: 15px">链单列表</span>
          <el-button icon="el-icon-download" size="small" @click="exportExcel"
            style="position:relative; left: 70%; top: 10px">导出当前链单记录</el-button>
          <el-select size="small" v-model="value" placeholder="排序方式" @change="changeSort(value)"
            style="width: 130px;position:relative; left: 70%; top: 10px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div>
          <el-table :data="tableData" :row-class-name="tableRowClassName" tooltip-effect="dark"
            @cell-click="chainDetails" style="width: 100%">
            <el-table-column align="center" prop="chain_no" label="链单编号" width="230">
            </el-table-column>
            <el-table-column align="center" prop="money" label="链单金额" width="150">
            </el-table-column>
            <el-table-column align="center" prop="scfpEnterprise.name" label="企业名称" width="180">
            </el-table-column>
            <el-table-column align="center" prop="scfpUser.name" label="开单人" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="create_time" label="开单日" width="220" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" prop="deadline" label="兑付日" width="220" show-overflow-tooltip>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button @click.native.stop="handleClick(scope.row)" type="text" size="small"
                  v-if="scope.row.status == '1'">审核
                </el-button>
                <el-button type="text" size="small" v-if="scope.row.status == '3'"
                  @click.native.stop="failReason(scope.row)">失败原因
                </el-button>
                <el-button type="text" size="small" v-if="scope.row.status == '2'"
                  @click.native.stop="transfer(scope.row)">转让
                </el-button>
                <el-button type="text" size="small" v-if="scope.row.status == '2'" @click.native.stop="loan(scope.row)">
                  去兑付
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="float:left; position: relative; top: 15px; left: 25%">
            <!-- 分页组件 -->
            <Pagination v-bind:child-msg="pageparm" @callFather="callFather">
            </Pagination>
          </div>
        </div>
      </div>

    </el-tabs>

    <!-- 失败原因弹窗 -->
    <el-dialog title="失败原因" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <p class="failReason">审核结果 ：<span style="color: red">不同意</span></p>
      <p class="failReason">失败原因 ：{{ dialogData.reason }}</p>
      <p class="failReason">审&nbsp;&nbsp;核&nbsp;&nbsp;人 ：{{ dialogData.updator }}</p>
      <p class="failReason">审核时间 ：{{ dialogData.update_time }}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 转让弹窗 -->
    <el-dialog title="链单转让" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
      <div>
        <el-radio-group v-model="transfer_enterprise" @change="transferChain" style="margin-left: 5%">
          <el-radio-button :disabled="chooseFlag(item)" v-for="item in networkData" :key="item.id" :label="item.ename">
          </el-radio-button>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmTransfer">确定转让</el-button>
        <el-button @click="dialogVisible2 = false">关 闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      options: [{
        value: '1',
        label: '链单金额降序 ↓'
      }, {
        value: '2',
        label: '链单金额升序 ↑'
      }, {
        value: '3',
        label: '开单日降序 ↓'
      }, {
        value: '4',
        label: '开单日升序 ↑'
      }, {
        value: '5',
        label: '兑付日降序 ↓'
      }, {
        value: '6',
        label: '兑付日升序 ↑'
      }],
      // 按钮组数据
      recipientList: [
        {
          label: "全部链单",
          value: "0"
        },
        {
          label: "待兑链单",
          value: "1"
        },
        {
          label: "已兑链单",
          value: "2"
        },
        {
          label: "复审失败",
          value: "3"
        },
        {
          label: "签收失败",
          value: "4"
        }
      ],
      value: '',
      tableData: [],
      multipleSelection: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      sortData: {
        enterprise_id: "",
        sortField: "",
        sortType: "",
        currentPage: 1,
        pageSize: 5,
        total: 0,
        chain_no: "",
        scfpUser: {
          name: "",
        },
        deadline: "",
        deadlineMax: "",
        creator: "",
        status: -1,
        status_tab: "",
      },
      // 条件查询参数
      searchItem: {
        enterprise_id: "",
        chain_no: "",
        scfpUser: {
          name: "",
        },
        status_tab: "",
        currentPage: 1,
        pageSize: 5,
        creator: "",
      },
      // 按钮组查询参数
      buttonItem: {
        enterprise_id: "",
        status: "-1",
        status_tab: "",
        currentPage: 1,
        pageSize: 5,
      },
      // findAllParam参数
      findAllParam: {
        enterprise_id: "",
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      type: "全部链单",
      allCount: 0,
      recheckCount: 0,
      failCount: 0,
      dialogVisible: false,
      dialogVisible2: false,
      // 弹窗信息
      dialogData: {
        reason: "",
        updator: "",
        update_time: "",
      },
      enterprise_id: "",
      chainCount: [
        {
          status_tab: "链单开单录入",
          enterprise_id: "",
        },
        {
          status_tab: "链单开单复核拒绝",
          enterprise_id: "",
        },
      ],
      user: {},
      networkData: [],
      transferData: {
        id: 0,
        status: 8,
        enterprise_id: 0,
      },
      enterprise_name: "",
      transfer_enterprise: "",
      loanData: {
        id: 0,
        status: 18,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.user = JSON.parse(localStorage.getItem('userdata'))
    this.enterprise_id = this.user.enterprise_id
    this.getdata();
    this.findCount();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata() {
      this.findAllParam.enterprise_id = this.enterprise_id
      this.$axios.post('/api/chain/search', this.findAllParam)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list
            // 分页赋值
            this.pageparm.currentPage = this.pageparm.currentPage
            //this.pageparm.pageSize = res.data.data.pageSize
            this.pageparm.total = res.data.data.total
          }
        }).catch(err => { })
      this.type = "全部链单"
    },
    handleClick(row) {
      this.$router.push({ path: '/chain/recheck/appr', query: { chain_id: row.id } })
    },
    // 分页插件事件
    callFather(parm) {
      if (this.type == "全部链单") {
        this.findAllParam.currentPage = parm.currentPage;
        this.findAllParam.pageSize = parm.pageSize;
        this.getdata();
      } else if (this.type == "待审链单") {
        this.buttonItem.currentPage = parm.currentPage;
        this.buttonItem.pageSize = parm.pageSize;
        this.updateSearch()
      } else if (this.type == "审核失败") {
        this.buttonItem.currentPage = parm.currentPage;
        this.buttonItem.pageSize = parm.pageSize;
        this.updateSearch()
      }
      if (this.searchItem.chain_no != "" || this.searchItem.scfpUser.name != "") {
        this.searchItem.currentPage = parm.currentPage
        this.searchItem.pageSize = parm.pageSize;
        this.search()
      }
      if (this.value != "" || this.value != null) {
        this.sortData.currentPage = parm.currentPage
        this.sortData.pageSize = parm.pageSize
        this.changeSort(this.value)
      }
    },
    // 搜索事件
    search() {
      this.type = ""
      this.searchItem.creator = ""
      this.searchItem.enterprise_id = this.enterprise_id
      if (this.searchItem.chain_no == "" && this.searchItem.scfpUser.name == "") {
        this.getdata()
      } else {
        if (this.searchItem.scfpUser.name != "") {
          this.searchItem.creator = "1"
        } else {
          this.searchItem.creator = ""
        }
        this.$axios.post('/api/chain/search', this.searchItem)
          .then(res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data.list
              // 分页赋值
              this.pageparm.currentPage = this.pageparm.currentPage
              //this.pageparm.pageSize = res.data.data.pageSize
              this.pageparm.total = res.data.data.total
            }
          }).catch(err => { })
      }
    },
    // 按钮组事件
    updateData(label) {
      if (label == "全部链单") {
        this.searchItem.chain_no = ""
        this.searchItem.scfpUser.name = ""
        this.getdata()
      } else if (label == "待审链单") {
        this.buttonItem.status_tab = "链单开单录入"
        this.updateSearch()
      } else {
        this.buttonItem.status_tab = "链单开单复核拒绝"
        this.updateSearch()
      }
    },
    updateSearch() {
      this.buttonItem.enterprise_id = this.enterprise_id
      this.$axios.post('/api/chain/search', this.buttonItem)
        .then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data.list
            // 分页赋值
            this.pageparm.currentPage = this.pageparm.currentPage
            //this.pageparm.pageSize = res.data.data.pageSize
            this.pageparm.total = res.data.data.total
          }
        }).catch(err => { })
    },
    changeSort(index) {
      this.sortData.creator = ""
      if (index == 1 || index == 3 || index == 5) {
        this.sortData.sortType = "desc";
      }
      if (index == 2 || index == 4 || index == 6) {
        this.sortData.sortType = "asc";
      }
      if (index == 1 || index == 2) {
        this.sortData.sortField = "money";
      }
      if (index == 3 || index == 4) {
        this.sortData.sortField = "create_time";
      }
      if (index == 5 || index == 6) {
        this.sortData.sortField = "deadline";
      }

      this.sortData.enterprise_id = this.enterprise_id
      this.sortData.status = -1
      this.sortData.scfpUser.name = this.searchItem.scfpUser.name
      this.sortData.chain_no = this.searchItem.chain_no
      if (this.type == "全部链单") {
        this.sortData.status_tab = ""
        this.sortData.status = -2
      } else if (this.type == "待审链单") {
        this.sortData.status_tab = "链单开单录入"
      } else {
        this.sortData.status_tab = "链单开单复核拒绝"
      }
      if ((this.sortData.chain_no == null || this.sortData.chain_no == "") &&
        (this.sortData.scfpUser.name == null || this.sortData.scfpUser.name == "")) {
        this.$axios.post('/api/chain/search', this.sortData)
          .then(res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data.list
              // 分页赋值
              this.pageparm.currentPage = this.pageparm.currentPage
              //this.pageparm.pageSize = res.data.data.pageSize
              this.pageparm.total = res.data.data.total
            }
          }).catch(err => { })
      } else {
        this.sortData.status = -2
        if (this.searchItem.scfpUser.name != "") {
          this.sortData.creator = "1"
        }
        this.sortData.scfpUser.name = this.searchItem.scfpUser.name
        this.$axios.post('/api/chain/search', this.sortData)
          .then(res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data.list
              // 分页赋值
              this.pageparm.currentPage = this.pageparm.currentPage
              //this.pageparm.pageSize = res.data.data.pageSize
              this.pageparm.total = res.data.data.total
            }
          }).catch(err => { })
      }

    },
    // 导出Excel
    exportExcel() {
      var form = document.createElement("form");
      form.style.display = "none";
      form.action = '/api/chain/export';
      form.method = "post";
      document.body.appendChild(form);
      var input = document.createElement("input");
      input.type = "hidden";
      input.name = "json";
      if (this.searchItem.chain_no == "" && this.searchItem.scfpUser.name == "") {
        this.findAllParam.enterprise_id = this.enterprise_id
        input.value = window.JSON.stringify(this.findAllParam);
      } else {
        input.value = window.JSON.stringify(this.searchItem);
      }

      form.appendChild(input);
      form.submit();
      form.remove();
    },
    // 查找各状态链单数量
    findCount() {
      this.chainCount[0].enterprise_id = this.enterprise_id
      this.chainCount[1].enterprise_id = this.enterprise_id
      this.$axios.get('/api/chain/findAllCount/' + this.enterprise_id)
        .then(res => {
          if (res.data.code == 200) {
            this.allCount = res.data.data
          }
        }).catch(err => { })
      this.$axios.post('/api/chain/findCount', this.chainCount[0])
        .then(res => {
          if (res.data.code == 200) {
            this.recheckCount = res.data.data
          }
        }).catch(err => { })
      this.$axios.post('/api/chain/findCount', this.chainCount[1])
        .then(res => {
          if (res.data.code == 200) {
            this.failCount = res.data.data
          }
        }).catch(err => { })
    },
    failReason(row) {
      this.dialogVisible = true
      this.dialogData.reason = row.reason
      if (row.scfpUserAppr != null) {
        this.dialogData.updator = row.scfpUserAppr.name
      }
      this.dialogData.update_time = row.update_time
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 页面跳转
    chainDetails(row) {
      if (row.status != 1) {
        this.$router.push({ path: '/chain/detail', query: { chain_id: row.id } })
      } else {
        this.$router.push({ path: '/chain/recheck/appr', query: { chain_id: row.id } })
      }
    },
    // 表格颜色渲染
    tableRowClassName({ row }) {
      if (row.status == 1) {
        return 'warning-row';
      } else if (row.status == 3) {
        return 'error-row';
      }
      return 'success-row';
    },
    // 链单转让
    transfer(row) {
      this.transfer_enterprise = ""
      this.transferData.id = row.id
      this.enterprise_name = row.scfpEnterprise.name
      this.$axios.get("/api/network/findByNid/" + row.network_id)
        .then(res => {
          if (res.data.code == 200) {
            this.networkData = res.data.data
          }
        }).catch()
      this.dialogVisible2 = true
    },
    transferChain(label) {
      this.$axios.get("/api/chain/findEnterpriseByName/" + label)
        .then(res => {
          this.transferData.enterprise_id = res.data.data.id
        }).catch()
    },
    confirmTransfer() {
      this.$confirm('是否将链单转让给目标企业？', '转让确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.put("/api/chain/update", this.transferData)
          .then(res => {
            if (res.data.code == 200) {
              this.dialogVisible2 = false
              this.$message({
                type: 'success',
                message: '转让成功!'
              });
              this.getdata()
              this.findCount()
            }
          }).catch()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消转让'
        });
      })
    },
    chooseFlag(item) {
      if (item.ename == this.enterprise_name) {
        return true;
      }
      return false;
    },
    loan(row) {
      this.loanData.id = row.id
      this.$axios.put("/api/chain/update", this.loanData)
        .then(res => {
          if (res.data.code == 200){
            this.$router.push({ path: '/chain/loan' })
          }
        }).catch()
    },
  },
};
</script>

<style>
.user-search {
  margin-top: 20px;
}

.userRole {
  width: 100%;
}

.failReason {
  margin-left: 20%;
  font: bold 18px 'Times New Roman', '黑体';
  line-height: 40px;
}

.button_group {
  color: red;
  font-weight: bold;
  font-size: 16px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #e3ffd5;
}

.el-table .error-row {
  background: #fddade;
}
</style>

 
 